<template>
    <div>
        <hr>
        <vux-icon type="success"></vux-icon>    
        <vux-icon type="info"></vux-icon>    
        <vux-icon type="info-circle"></vux-icon>    
        <vux-icon type="warn"></vux-icon>    
        <vux-icon type="waiting"></vux-icon>    
        <vux-icon type="waiting-circle"></vux-icon>    
        <vux-icon type="safe-success"></vux-icon>    
        <vux-icon type="safe_warn"></vux-icon>    
        <vux-icon type="success-circle"></vux-icon>    
        <vux-icon type="success-no-circle"></vux-icon>    
        <vux-icon type="circle"></vux-icon>    
        <vux-icon type="download"></vux-icon>    
        <vux-icon type="cancel"></vux-icon>    
        <vux-icon type="search"></vux-icon> 
        <vux-icon type="clear"></vux-icon> 
        <hr> 
        <vux-icon type="success" is-msg></vux-icon>
        <vux-icon type="info" is-msg></vux-icon>
        <vux-icon type="warn" is-msg></vux-icon>
        <vux-icon type="waiting" is-msg></vux-icon>
        <vux-icon type="safe_success" is-msg></vux-icon>
        <vux-icon type="safe_warn" is-msg></vux-icon>  
    </div>
</template>
<script>
    import { Icon as vuxIcon } from 'vux';
    export default {
        components: {
            vuxIcon
        }
    }
</script>
<style lang="less" scoped>
// 样式必须使用 scoped 覆盖
.weui-icon-success{
    font-size: 50px;
    color:red;
}
</style>




   